.page {

}

.header-header{
  padding-bottom: 20rpx;
  background-color: #8CD1BE;
  border-radius: 40rpx;
  margin-bottom: 36rpx;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1AA37D;
    border-radius: 40rpx;
    padding: 44rpx 36rpx;
    margin-top: 10rpx;
    color: #fff;
  }
}

.trip-title {
  font-size: 32rpx;
  display: flex;
  align-items: center;
  .wallet-img{
    width: 62rpx;
    height: 48rpx;
    margin-right: 20rpx;
    margin-bottom: -4rpx;
  }
}

.trip-total {
  font-size: 48rpx;

  margin-top: 10rpx;
}

.day-group {
  margin-bottom: 48rpx;
  padding: 0 8rpx;
  box-shadow: 0 2px 5.7px 0 #0000000d;
  border-radius: 36rpx;
  background: #F2FAF8;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx 20rpx;
  .header-info{
    display: flex;
    align-items: center;
    .header-date{
      font-size: 36rpx;
    }
    .header-weekday{
      font-size: 36rpx;
      margin: 0 20rpx;
    }
    .header-total{
      color: #1AA37D;
      font-size: 28rpx;
    }
  }
  .dian-list{
    display: flex;
    align-items: center;
    .dian{
      background: #1AA37D;
      width: 10rpx;
      height: 10rpx;
      margin-right: 10rpx;
      border-radius: 50%;
    }
  }
}

.bill-list{
  border-radius: 36rpx;
  background-color: #fff;
}
.bill-item {
  display: flex;
  align-items: center;
  padding: 32rpx;
}

.bill-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 32rpx;
}

.bill-info {
  flex: 1;
}

.bill-name {
  font-size: 32rpx;
  display: flex;
  align-items: center;
  .item-beizhu{
    width: 300rpx;
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}

.bill-payer {
  font-size: 28rpx;
  color: #5A5B78;
}

.bill-amount {
  font-size: 32rpx;
  font-weight: 600;
}

/* 遮罩 */
.mask {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

/* 弹框 */
.filter-popup {
  position: fixed;
  bottom: 428rpx;
  left: 50%;
  width: 606rpx;
  height: 492rpx;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 56rpx;
  padding: 48rpx 56rpx;
  z-index: 101;
}

.filter-title {
  background-color: #1AA37D;
  color: #fff;
  height: 98rpx;
  width: 320rpx;
  border-radius: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  position: absolute;
  top: -126rpx;
  left: 50%;
  transform: translateX(-50%);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
  margin-bottom: 14rpx;
}

.close-btn {
  width: 140rpx;
  height: 140rpx;
  background: #1AA37D;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 140rpx;
  font-size: 64rpx;
  position: absolute;
  bottom: -240rpx;
  left: 50%;
  transform: translateX(-50%);
}


.keyboard-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 64rpx;
  width: 100%;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 84rpx 32rpx 86rpx;
  height: 1432rpx;
  /* 动画关键 */
  animation: slideUp 0.3s ease;
  .keyboard-heard {
    padding: 0 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .heard-title {
      font-size: 52rpx;
      font-weight: 600;
    }

    .heard-right {
      .heard-del {
        color: #EB5353;
        font-size: 40rpx;
        padding: 20rpx;
      }

      .heard-ok {
        font-size: 40rpx;
        padding: 20rpx;
        margin-right: -20rpx;
      }
    }
  }

  .tab-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tab-item {
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      border-radius: 90rpx;
      background-color: #CFEDE5;
      padding: 26rpx;

      .tab-img {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: -4rpx;
      }

      .tab-right {
        display: flex;
        align-items: center;

        .tab-value {
          text-align: center;
          color: #000;
          font-size: 32rpx;
        }

        .toBottom-img {
          // margin-left: 12rpx;
          width: 48rpx;
          height: 48rpx;
          margin-bottom: -4rpx;
        }
      }
    }
    .food{
      background-color: #F8EDD9;
    }
    .play{
      background-color: #DFF4E2;
    }
    .shop{
      background-color: #F9EFF7;
    }
    .hotel{
      background-color: #E5EAF3;
    }
    .traffic{
      background-color: #E5F2F3;
    }
    .other{
      background-color: #D9F1FF;
    }
    .tab-item2 {
      margin-left: 14rpx;
      
    }
  }

  .expend {
    margin: 32rpx 0;
    text-align: center;
    color: #707070;
  }

  .fake-input {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    margin-bottom: 40rpx;

    min-height:128rpx;
    .unit {
      font-size: 72rpx;
      color: #707070;
    }

    .amount-text {
      margin-left: 8rpx;
      font-size: 96rpx;
      // font-weight: bold;
    }
  }

  .info-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16rpx;

    .input-item {
      flex: 1;
      padding: 18rpx 30rpx;
      border: 2rpx solid #D9D9D9;
      border-radius: 96rpx;
      margin-right: 12rpx;

      .my-placeholder {
        font-size: 32rpx;
        color: #A2A2A2;
      }
    }

    .info-item {
      flex: 1;
      padding: 18rpx 30rpx;
      border: 2rpx solid #D9D9D9;
      border-radius: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .placeholder {
        font-size: 32rpx;
        color: #A2A2A2;
      }

      .toRight-img {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .cursor {
    width: 2rpx;
    height: 120rpx;
    background: #000;
    margin-left: 4rpx;
    animation: blink 1s step-start infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  .keyboard {
    display: flex;
    align-items: center;
    margin-top: 48rpx;
    .key-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 4rpx;

      .key {
        height: 160rpx;
        width: 168rpx;
        border-radius: 60rpx;
        font-size: 72rpx;
        background: #F3F3F3; 
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .right-box {
      display: flex;
      flex-direction: column;
      width: 162rpx;
      margin-left: 8rpx;
      .btn-img{
        width: 48rpx;
        height: 48rpx;
      }
      .del{
        width: 162rpx;
        height: 324rpx;
        flex-shrink: 0;
        border-radius: 60rpx;
        background: #CFEDE5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ok{
        margin-top: 4rpx;
        width: 162rpx;
        height: 324rpx;
        flex-shrink: 0;
        border-radius: 60rpx;
        background: #1AA37D;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }



}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 弹框内容 */
  .modal-content {
    width: 620rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 44rpx;
    text-align: center;
    position: relative;
  }
  
  /* 图标 */
  .modal-icon {
    width: 260rpx;
    height: 184rpx;
    margin-top: -126rpx;
  }
  
  /* 标题 */
  .modal-title {
    // margin-top: 20rpx;
    font-size: 48rpx;
    margin-bottom: 48rpx;
  }
  
  /* 提示内容 */
  .modal-message {
    font-size: 36rpx;
    color: #A2A2A2;
    margin-bottom: 72rpx;
  }
  
  /* 按钮组 */
  .modal-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  /* 单个按钮 */
  .modal-btn {
    width: 45%;
    padding: 20rpx 0;
    border-radius: 32rpx;
    text-align: center;
    font-size: 40rpx;
  }
  
  /* 取消按钮样式 */
  .cancel-btn {
    background-color: #D9D9D9;
    color: #707070;
    border-radius: 32rpx;
    font-size: 40rpx;
  }
  
  /* 确认按钮样式 */
  .confirm-btn {
    background-color: #1AA37D;
    color: white;
  }
}

/* 遮罩层 */
.modal-mask2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 弹框内容 */
  .modal-content {
    width: 620rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 44rpx;
    text-align: center;
    position: relative;
  }
  
  /* 图标 */
  .modal-icon {
    width: 260rpx;
    height: 184rpx;
    margin-top: -126rpx;
  }
  
  /* 标题 */
  .modal-title {
    // margin-top: 20rpx;
    font-size: 48rpx;
    margin-bottom: 48rpx;
  }
  
  /* 提示内容 */
  .modal-message {
    font-size: 36rpx;
    color: #A2A2A2;
    margin-bottom: 72rpx;
  }
  
  /* 按钮组 */
  .modal-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  /* 单个按钮 */
  .modal-btn {
    width: 45%;
    padding: 20rpx 0;
    border-radius: 32rpx;
    text-align: center;
    font-size: 40rpx;
  }
  
  /* 取消按钮样式 */
  .cancel-btn {
    background-color: #D9D9D9;
    color: #707070;
    border-radius: 32rpx;
    font-size: 40rpx;
  }
  
  /* 确认按钮样式 */
  .confirm-btn {
    background-color: #1AA37D;
    color: white;
  }
}

.time-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  padding: 0 20rpx 0rpx;
  
  .popup-container {
    width: 100%;
    background-color: #fff;
    border-radius: 64rpx;
    height: 812rpx;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    padding: 68rpx 0 0;
    border-bottom: 2rpx solid #eee;
  }
  
  .tab {
    font-size: 32rpx;
    color: #A2A2A2;
    padding: 10rpx 20rpx 32rpx;
    position: relative;
  }
  
  .active {
    width: 86rpx;
    height: 6rpx;
    flex-shrink: 0;
    border-radius: 46rpx 46rpx 0 0;
    background: #1AA37D;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-48%);
  }
  .tab-bottom{
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    .ChooseYes-img{
      width: 120rpx;
      height: 120rpx;
    }
  }
  .tab-content {
    padding: 76rpx 36rpx 66rpx; 
    .time-title{
      font-size: 52rpx;
      font-weight: 600;
      margin-bottom: 50rpx;
    }
    .days-item{
      font-size: 48rpx;
      height: 108rpx;
      background-color: #E7F5F1;
      
      border-radius: 36rpx;
      z-index: -1;
    }
    .days-item::before {
      content: '';
      position: absolute;
      top: 0rpx;
      border: none;
    }
    
    .days-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      border: none;
    }

    .day-item{
      font-size: 48rpx;
      text-align: center;
      line-height: 108rpx;
      // font-weight: 600;
      // position: absolute;
      // background-color:#E7F5F1;
      // border-radius: 36rpx;
    }
    .day-item2{
      // width: 300rpx;
      // padding-left: 80rpx;
      
    }
  }
  
  .day-picker {
    display: flex;
    justify-content: center;
  }
  
  .picker-item {
    text-align: center;
    font-size: 52rpx;
    color: #333;
    height: 60rpx;
    line-height: 60rpx;
  }
  
  .placeholder {
    height: 300rpx;
  }

}  



.popup-maskk {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  
  .popup-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    background: #fff;
    border-radius: 64rpx;
    padding: 76rpx 48rpx 80rpx;
    // animation: slideUp 0.3s ease-out;
  }
  
  /* 动画：从下往上 */
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  .popup-title {
    font-size: 52rpx;
    font-weight: 600;
    margin-bottom: 48rpx;
  }
  
  .input-box{
    background-color: #F9F9F9;
    padding: 32rpx 48rpx;
    border-radius: 36rpx;
    margin-bottom: 32rpx;
    .popup-input {
      width: 100%;
    }
  }
  
  .popup-select {
    background-color: #F9F9F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 48rpx;
    border-radius: 36rpx;
    margin-bottom: 66rpx;
    .toRight-img{
      width: 48rpx;
      height: 48rpx;
      margin-bottom: -4rpx;
    }
  }
  
  
  .popup-footer {
    display: flex;
    justify-content: center;
  }
  
  .btn-cancel {
    flex: 1;
    background: #D9D9D9;
    color: #707070;
    padding: 24rpx 0;
    text-align: center;
    margin-right: 24rpx;
    border-radius: 32rpx;
    font-weight: 600;
  }
  
  .btn-confirm {
    font-weight: 600;
    flex: 1;
    background: #1AA37D;
    color: white;
    padding: 24rpx 0;
    text-align: center;
    border-radius: 32rpx;
  }
  
  .folder-list {
    display: flex;
    flex-direction: column;
  }
  
  .folder-item {
    padding: 25rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height:112rpx ;
    .del-icon{
      color: #A2A2A2;
      font-size: 48rpx;
      padding: 20rpx 30rpx;
    }
  }
  .folder-item:hover {
    color: #07c160;
  }
}

